<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 50px">
      <div style="width: 80%">
        <el-card v-if="hotelData">
          <div style="font-size: 25px;font-weight: bold;margin-left: 80px">{{ hotelData.name }}</div>
          <div style="margin-top: 10px;margin-left: 80px"><i
              class="el-icon-location-information"></i>{{ hotelData.location }}
          </div>
          <div style="display: flex">
            <div style="flex: 1">
              <div style="display: flex">
                <div style="margin-left: 80px">
                  <div style="display: flex;align-items: center;">
                    <div style="display: flex">
                      <img :src="`http://localhost:8000/hotel_image_download/${this.hotel_id}/`" alt=""
                           style="width: 500px;height: 300px">
                    </div>
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <div style="margin-left: 50px">
                      <div style="margin-bottom: 10px;font-weight: bold;font-size: 24px;">
                        <span style="font-size: 24px;color: #007BFF">{{ hotelData.level }}</span>星级
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">简介</div>
                      <div
                          style="display: flex;justify-content: center;align-items: center ;background-color: #d4eeff;width: 300px;height: 100px;border-radius: 10px;margin-top: 10px">
                        <div style="margin: 20px">
                          {{ hotelData.intro }}
                        </div>
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">价格</div>
                      <div style="display: flex">
                        <span style="font-size: 24px;color: #007BFF">￥{{ hotelData.price }}</span>
                        <div style="margin: 10px;font-weight: bold;">起</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card v-else>
          <div style="text-align: center">无数据，请先申请酒店</div>
        </el-card>
      </div>
    </div>
    <div style="display: flex;justify-content: center;margin-top: 20px">
      <el-card style="width: 80%">
        <el-button type="primary" @click="dialogHotel = true">修改主页</el-button>
        <el-button type="primary" @click="dialogPicture = true">修改图片</el-button>
      </el-card>
    </div>
    <el-dialog title="提示" :visible.sync="dialogHotel" width="30%">
      <el-form ref="hotelRef" :model="hotelData" :rules="rules" label-width="80px" style="padding-right: 20px">
        <div style="text-align: center; margin-bottom: 20px">
          <el-form-item label="酒店名" prop="Recharge">
            <el-input v-model="hotelData.name" placeholder="酒店名" type="text"></el-input>
          </el-form-item>
          <el-form-item label="酒店地址" prop="Recharge">
            <el-input v-model="hotelData.location" placeholder="酒店地址" type="text"></el-input>
          </el-form-item>
          <el-form-item label="酒店等级" prop="level">
            <el-select v-model="hotelData.level" placeholder="请选择" style="width: 300px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="酒店简介" prop="Recharge">
            <el-input v-model="hotelData.intro" placeholder="酒店简介" type="text"></el-input>
          </el-form-item>
          <el-form-item label="酒店价格" prop="Recharge">
            <el-input v-model="hotelData.price" placeholder="酒店价格" type="text" maxlength="10"
                      pattern="\d{1,10}"></el-input>
          </el-form-item>
        </div>
        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="save">提交申请</el-button>
          <el-button @click="dialogHotel = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogPicture" width="30%" style="height: 500px">
      <div style="margin-top: 10px;display: flex;justify-content: center">
        <el-upload
            class="avatar-uploader"
            :action="`http://localhost:8000/hotel_image_upload/${this.hotel_id}/`"
            :file-list="url? [url] : []"
            list-type="picture"
            name="url"
            :on-success="handleAvatarSuccess"
        >
          <el-button type="primary">上传图片</el-button>
          <el-button type="primary" @click="dialogPicture = false">取消</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "hotelHome",
  data() {
    return {
      options: [{
        value: '1',
        label: '一星'
      }, {
        value: '2',
        label: '二星'
      }, {
        value: '3',
        label: '三星'
      }, {
        value: '4',
        label: '四星'
      }, {
        value: '5',
        label: '五星'
      }],
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      dialogHotel: false,
      dialogPicture: false,
      hotel: [],
      hotelData: {},
      url: "",
      hotelFrom: {
        name: "",
        location: "",
        level: "",
        intro: "",
        url: "",
        price: "",
      },
      hotel_id: "",
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        location: [
          {required: true, message: '请输入地址', trigger: 'blur'},
        ],
        intro: [
          {required: true, message: '请输入简介', trigger: 'blur'},
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的价格', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.load_business_id()
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      // 把shops的图片属性换成上传的图片的链接
      this.url = response.data
      this.dialogPicture = false
      //刷新
      location.reload()
    },
    load_business_id() {
      this.$request.post('/hotel_search/', {
        "business_id": this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.hotel = res.data.hotel_list;
          const length = this.hotel.length;
          this.hotel_id = this.hotel[length - 1].id;
          this.hotelData = this.hotel[length - 1]
          this.load()
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //加载酒店信息
    load() {  //展示房间和评论
      console.log("酒店首页", this.hotel_id)
      this.$request.get('/hotel_detail/' + this.hotel_id + "/").then(res => {
        if (res && res.data) {
          this.hotelData = res.data.hotel
          console.log("酒店详情", this.hotelData)
        }
      })
    },
    //保存hotelFrom数据
    save() {
      this.$request.post('/hotel_update/', {
        "hotel_id": this.hotel_id,
        "name": this.hotelData.name,
        "level": this.hotelData.level,
        "location": this.hotelData.location,
        "intro": this.hotelData.intro,
        "url": this.hotelData.url,
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('提交成功')
          this.load()
          this.dialogHotel = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>
<style scoped>

</style>